<template>
  <div>
    <div id="panel" :style="style" v-finger:multipoint-start="multipointStart" v-finger:pinch="pinch" v-finger:press-move="pressMove" v-finger:multipoint-end="multipointEnd" v-finger:touch-start="touchStart" v-finger:touch-move="touchMove" v-finger:touch-end="touchEnd" v-finger:touch-cancel="touchCancel">
      <canvas id="myCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
    </div>
    <!-- <div>
      <canvas id="myCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
    </div> -->
    <p>{{msg}}</p>
    <!-- <div class="paint"></div> -->
  </div>
</template>
<script>
import babao from '@img/babao.png'
import yixiu from '@img/yixiu.png'
import sunflower from '@img/draw_sunflower.png'
// import Zoom from "@utils/Zoom";

export default {
  name: 'Canvas',
  data() {
    return {
      canvas: null,
      ctx: null,
      canvasWidth: 0,
      canvasHeight: 0,
      drawing: false,
      moving: false,
      baseX: 0,
      baseY: 0,
      translateX: 0,
      translateY: 0,
      scale: 1,
      oldScale: 1,
      style: 'transform: translate(0,0) scale(1,1);',
      images: {
        babao,
        yixiu,
        sunflower,
      },
      msg: '',
    }
  },

  mounted() {
    this.$nextTick(function() {
      let canvas = document.getElementById("myCanvas");
      this.ctx = canvas.getContext("2d");
      this.drawMethod()
    })
  },

  methods: {
    drawMethod() {
      let width = window.innerWidth
      let height = window.innerHeight
      let image = new Image()
      image.src = this.images.sunflower
      // image.src = this.images[this.$router.params.image]
      image.onload = () => {
        // console.log('image', image.src)
        this.canvasWidth = width
        this.canvasHeight = image.height / image.width * this.canvasWidth
        this.baseX = this.canvasWidth / 2
        this.baseY = this.canvasHeight / 2
        setTimeout(() => {
          this.ctx.drawImage(image, 0, 0, this.canvasWidth, this.canvasHeight)
        }, 50)
        // let zoom = new Zoom('#panel');
      }
    },

    multipointStart(evt) {
      evt.preventDefault()
      this.moving = true
      this.msg = `onMultipointStart ${JSON.stringify(evt.targetTouches)} ${evt.zoom}`
      console.log('onMultipointStart', evt);
    },

    pinch(evt) {
      evt.preventDefault()
      this.scale = this.oldScale * evt.zoom
      this.msg = `onPinch ${evt.zoom}`
      this.style = `transform: translate(${this.translateX}px, ${this.translateY}px) scale(${this.scale}, ${this.scale})`
      this.msg = `onPinch ${this.style} ${evt.zoom}`
    },

    pressMove(evt) {
      evt.preventDefault()
      if (!this.drawing)
        return
      let { x, y } = this.getXY(evt)
      this.ctx.lineTo(x, y);
      this.ctx.stroke();
      this.msg = `onPressMove = ${document.body.scrollTop}`
    },

    multipointEnd(evt) {
      evt.preventDefault()
      this.moving = false
    },

    touchMove(evt) {
      evt.preventDefault()
      if (this.moving) {
        this.translateX += evt.deltaX
        this.translateY += evt.deltaY
        this.style = `transform: translate(${this.translateX}px,${this.translateY}px) scale(${this.scale}, ${this.scale})`
        console.log('onTouchMove', evt);
      }
      this.msg = `onTouchMove ${this.translateX}, ${this.translateY}, ${evt.deltaX}, ${evt.deltaY}`
    },

    touchStart(evt) {
      evt.preventDefault()
      let { x, y } = this.getXY(evt)
      this.ctx.fillStyle = "#FF0000";
      this.ctx.lineWidth = 5
      this.ctx.beginPath();
      this.ctx.moveTo(x, y);
      this.msg = `onTouchStart ${x} ${y}`
      console.log('onTouchStart', evt, x, y);
      this.drawing = true
    },

    touchEnd(evt) {
      evt.preventDefault()
      console.log('onTouchEnd', evt);
      this.drawing = false
      this.moving = false
      this.oldScale = this.scale
    },

    touchCancel(evt) {
      evt.preventDefault()
      console.log('onTouchCancel', evt);
      this.drawing = false
      this.moving = false
      this.oldScale = this.scale
    },

    getXY(evt) {
      let touch = evt.targetTouches[0]
      let changX = this.translateX + document.body.scrollLeft
      let changY = this.translateY + document.body.scrollTop
      let newBaseX = this.baseX + changX
      let newBaseY = this.baseY + changY
      let x = ((touch.clientX - newBaseX) / this.scale + newBaseX) - changX
      let y = ((touch.clientY - newBaseY) / this.scale + newBaseY) - changY
      return {
        x,
        y,
      }
    },

  },
}

</script>
<style scoped>


</style>
